import React, { Component } from 'react'

class MagicItem extends Component {
  static defaultProps = {
    start: [-1, -1],
    end: [-1, -1],
    linkUrl: '',
    imgUrl: ''
  }

  render () {
    const {start, end, linkUrl, imgUrl} = this.props
    return (
      <div className="item" style={{gridArea: start.concat(end).join('/')}}>
        <a href={linkUrl}>
          <img src={imgUrl}/>
        </a>
      </div>
    )
  }
}

class MagicView extends Component {
  static defaultProps = {
    list: []
  }

  render () {
    const {list, order} = this.props
    return (
      <div className={`container container-order-${order}`}>
        {list.map((item, index) => <MagicItem key={index} {...item} />)}
      </div>
    )
  }
}

export default MagicView
